<template>
  <div class="data-item">
    <div class="data-item__title">{{ platformObj[data.bc_type]?.name }}</div>
    <div class="data-item__content">
      <app-info :column="3" :gap="12">
        <app-info-item v-for="item in infos" :label="item.label">
          <app-text :type="item.type">{{ item.value }}</app-text>
        </app-info-item>
      </app-info>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  data: Object,
})

const { platformObj } = inject('/home')

const infos = computed(() => {
  return [
    { label: '今日比赛：', value: props.data.today.match_num },
    { label: '匹配数据：', value: props.data.today.mate_num },
    {
      label: '数据状态：',
      value: props.data.today.odds_time_skip,
      type: props.data.today.odds_time_skip >= 30 ? 'red' : 'green',
    },

    { label: '早盘比赛：', value: props.data.early.match_num },
    { label: '匹配数据：', value: props.data.early.mate_num },
    {
      label: '数据状态：',
      value: props.data.early.odds_time_skip,
      type: props.data.early.odds_time_skip >= 30 ? 'red' : 'green',
    },

    { label: '滚球比赛：', value: props.data.live.match_num },
    { label: '匹配数据：', value: props.data.live.mate_num },
    {
      label: '数据状态：',
      value: props.data.live.odds_time_skip,
      type: props.data.live.odds_time_skip >= 30 ? 'red' : 'green',
    },
  ]
})
</script>
<style lang="scss" scoped>
.data-item {
  width: calc(27% - 12px);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 16px;
  margin-right: 12px;
  flex-shrink: 0;
}

.data-item__title {
  font-weight: bold;
  margin-bottom: 12px;
  height: 18px;
  line-height: 18px;
}

:deep(.app-info) {
  font-size: 12px;
  .app-info-item__value {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
